<template>
  <div class="dataset-card" :class="{ active: isActive }" @click="selectStep">
    <div class="step-header">
      <div class="step-icon" :class="`step-${stepIndex}`">
        <i :class="icon"></i>
      </div>
      <div class="step-info">
        <div class="step-name">{{ name }}</div>
        <div class="step-desc">{{ description }}</div>
      </div>
      <!-- 控制列显示的小图标 -->
      <div class="toggle-columns" @click.stop="toggleColumns">
        <i :class="['fas', showAllColumns ? 'fa-compress' : 'fa-expand']"></i>
      </div>
    </div>
    <div class="schema-container">
      <table class="columns-table">
        <thead>
          <tr>
            <th>字段名称</th>
            <th>字段类型</th>
            <th v-if="showAllColumns">字段备注</th>
            <th v-if="showAllColumns">是否必填</th>
            <th v-if="showAllColumns">数据类型</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(column, index) in columns" :key="index" :class="getColumnClass(column)">
            <td class="column-name">
              <span :class="`column-icon ${getColumnIconClass(column)}`">
                <i :class="getColumnIcon(column)"></i>
              </span>
              {{ column.name }}
              <!-- 添加字段状态提示 -->
              <span v-if="column.status === 'added'" class="status-tag">新增</span>
              <span v-if="column.status === 'modified'" class="status-tag">修改</span>
            </td>
            <td>{{ column.type }}</td>
            <td v-if="showAllColumns">{{ column.comment }}</td>
            <td v-if="showAllColumns">
              <i :class="['fas', column.required ? 'fa-check-circle' : 'fa-times-circle']" :style="{ color: column.required ? '#4caf50' : '#f44336' }"></i>
              {{ column.required ? '是' : '否' }}
            </td>
            <td v-if="showAllColumns">{{ column.dataType }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    stepIndex: {
      type: Number,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
    description: {
      type: String,
      required: true,
    },
    icon: {
      type: String,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
    isActive: {
      type: Boolean,
      default: false,
    },
    showAllColumns: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    selectStep() {
      this.$emit('select-step', this.stepIndex);
    },
    toggleColumns() {
      this.$emit('toggle-columns', this.stepIndex);
    },
    getColumnClass(column) {
      if (column.status === 'matched') return 'row-matched';
      return '';
    },
    getColumnIconClass(column) {
      if (column.status === 'modified') return 'icon-modified';
      if (column.status === 'removed') return 'icon-removed';
      if (column.status === 'split') return 'icon-split';
      if (column.status === 'added') return 'icon-added';
      if (column.status === 'aggregate') return 'icon-aggregate';
      return 'icon-none';
    },
    getColumnIcon(column) {
      if (column.status === 'modified') return 'fas fa-sync-alt';
      if (column.status === 'removed') return 'fas fa-trash';
      if (column.status === 'split') return 'fas fa-cut';
      if (column.status === 'added') return 'fas fa-plus';
      if (column.status === 'aggregate') return 'fas fa-object-group';
      return '';
    },
  },
};
</script>

<style scoped>
.dataset-card {
  min-width: 200px;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  cursor: pointer;
  border: 1px solid var(--border-color);
  overflow: hidden;
  flex-shrink: 0;
}

.dataset-card.active {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  border: 2px solid;
  border-top-width: 5px;
}

.step-header {
  padding: 18px;
  background: var(--header-bg);
  font-weight: 600;
  display: flex;
  align-items: center;
  position: relative;
}

.step-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 15px;
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.9);
}

.step-info {
  flex: 1;
}

.step-name {
  font-size: 1.2rem;
  color: #2d3748;
  font-weight: 600;
}

.step-desc {
  font-size: 0.9rem;
  color: #718096;
}

.schema-container {
  padding: 0 18px 18px;
}

.columns-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
}

.columns-table th,
.columns-table td {
  padding: 14px 8px; /* 减小内边距 */
  text-align: left;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.columns-table th {
  background-color: var(--table-header-bg);
  font-weight: 600;
  font-size: 0.9rem;
  color: #4a5568;
  max-width: 150px; /* 设置最大宽度 */
}

.columns-table td {
  max-width: 150px; /* 设置最大宽度 */
}

.columns-table tbody tr {
  transition: all 0.2s ease;
}

.column-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  margin-right: 10px;
}

.icon-added {
  background-color: #2e7d32;
  color: white;
}

.icon-removed {
  background-color: #c62828;
  color: white;
}

.icon-modified {
  background-color: #ef6c00;
  color: white;
}

.icon-split {
  background-color: #0288d1;
  color: white;
}

.icon-aggregate {
  background-color: #7b1fa2;
  color: white;
}

.icon-none {
  visibility: hidden;
}

.column-name {
  font-weight: 500;
  color: #2d3748;
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.removed-column {
  text-decoration: line-through;
  color: #c62828;
  opacity: 0.7;
}

.row-added,
.row-modified,
.row-removed,
.row-split,
.row-aggregate {
  border-left: none !important;
}

/* 添加匹配字段的绿色竖线样式 */
.row-matched {
  border-left: 4px solid #4CAF50 !important;
}

.row-added td,
.row-modified td,
.row-removed td,
.row-split td,
.row-aggregate td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.columns-table tr:last-child td {
  border-bottom: none;
}

.columns-table tr:hover {
  transform: translateX(3px);
  background-color: rgba(0, 0, 0, 0.02);
}

.columns-table .row-added:hover {
  background-color: color-mix(in srgb, var(--added-color) 80%, white);
}

.columns-table .row-modified:hover {
  background-color: color-mix(in srgb, var(--modified-color) 80%, white);
}

.columns-table .row-removed:hover {
  background-color: color-mix(in srgb, var(--removed-color) 80%, white);
}

.columns-table .row-split:hover {
  background-color: color-mix(in srgb, var(--split-color) 80%, white);
}

.columns-table .row-aggregate:hover {
  background-color: color-mix(in srgb, var(--aggregate-color) 80%, white);
}

.toggle-columns {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
  font-size: 1rem;
  color: #757575;
}

.toggle-columns:hover {
  color: #4285f4;
}

/* 添加状态标签样式 */
.status-tag {
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  background-color: #e3f2fd;
  color: #1976d2;
}
</style>
